<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
	</head>
	<style>
		.divtop{
			width: 1113px; height: 40px;border: 1px solid #b7d5df;line-height: 40px;margin:auto;margin-top:5px;

		}
		.layui-table-box, .layui-table-view{
			margin:auto;
		}
	</style>
	<body>
	<div class="divtop">
		<div class="layui-form-item layui-form" >
			<div class="layui-inline" >
				<label class="layui-form-label" >商品类型:</label>
				<div class="layui-input-inline">
					<select name="quiz" lay-verify="selecttype" lay-search="" lay-filter="selecttype" id="selecttype">

					</select>
				</div>
			</div>
			商品编号：
			<div class="layui-inline" >
				<input class="layui-input" name="name" placeholder="请输入编号" id="pid" autocomplete="off">
			</div>
			<div class="layui-inline">
				<button class="layui-btn layui-btns layui-btn-normal" id="selectpid" data-type="getCheckData" >查询</button>
			</div>

		</div>
	</div>
	<table id="demo" lay-filter="demo"  ></table>
	<script src="plugins/layui/layui.js" charset="utf-8"></script>
	<script src="plugins/layui/jquery-3.3.1.min.js"></script>
	<script>
$(function () {

    var table=null;
    layui.use('table', function(){
        table= layui.table;
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){

            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    del(data.studentid);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        //进行渲染
        table.render({
            elem: '#demo'
            ,height: 471
            ,width: 1113
            ,page:true
            ,url: '/Productweb?action=fintypejson&tid=1' //数据接口
            ,cellMinWidth: 140
            ,cols: [[ //表头
                {type:'numbers', title: '序号'}
                ,{field: 'pid', title: '商品编号',align:'center'}
                ,{field: 'tname', title: '商品类型',align:'center'}
                ,{field: 'pimg', title: '商品图片',align:'center'}
                ,{field: 'pprice', title: '商品价格',align:'center'}
                ,{field: 'pnumber', title: '库存数量', align:'center'}
                ,{field: 'pstatus', title: '状态', align:'center'}
                ,{field: 'right', title: '操作',width:'178', align:'center',  toolbar: '#barDemo'}
            ]]
            ,id:"idsw"
        });
    });
    //进行按班级查询
    var form;
    layui.use('form', function(){
        form= layui.form;
        form.on('select(selecttype)', function(data) {
            //进行渲染
            table.render({
                elem: '#demo'
                , height: 471
                , width: 1113
                , page: true
                , url: '/Productweb?action=fintypejson&tid='+data.value //数据接口
                , cellMinWidth: 140
                , cols: [[ //表头
                    {type: 'numbers', title: '序号'}
                    , {field: 'pid', title: '商品编号', align: 'center'}
                    , {field: 'tname', title: '商品类型', align: 'center'}
                    , {field: 'pimg', title: '商品图片', align: 'center'}
                    , {field: 'pprice', title: '商品价格', align: 'center'}
                    , {field: 'pnumber', title: '库存数量', align: 'center'}
                    , {field: 'pstatus', title: '状态', align: 'center'}
                    , {field: 'right', title: '操作', width: '178', align: 'center', toolbar: '#barDemo'}
                ]]
                , id: "idsw"
            });
        })
        $.ajax({
            type:"get",
            url:"/ProductTypeweb?action=gson",//请求路径
            success:function(data){//请求成功后的事件
                $.each(data,function(index,obj){
                    var option=$("<option value='"+obj.tid+"'>"+obj.tname+"</option>");
                    $("#selecttype").append(option);
                    form.render();
                })
            }
        })
		$("#selectpid").click(function () {

            //进行渲染
            table.render({
                elem: '#demo'
                , height: 471
                , width: 1113
                , url: '/Productweb?action=finpidjson&pid='+$("#pid").val() //数据接口
                , cellMinWidth: 140
                , cols: [[ //表头
                    {type: 'numbers', title: '序号'}
                    , {field: 'pid', title: '商品编号', align: 'center'}
                    , {field: 'pimg', title: '商品图片', align: 'center'}
                    , {field: 'pprice', title: '商品价格', align: 'center'}
                    , {field: 'pnumber', title: '库存数量', align: 'center'}
                    , {field: 'pstatus', title: '状态', align: 'center'}
                    , {field: 'right', title: '操作', width: '178', align: 'center', toolbar: '#barDemo'}
                ]]
                , id: "idsw"
            });
        })
    });

})


</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	</script>
	</body>

	<fieldset id="form1" hidden="hidden">
		<legend>用户信息</legend>
		<p>
			<label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
		</p>
		<p>
			<label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
		</p>
		<p>
			<button type="button" id="btnSave" onclick="layer.closeAll()">保存</button>
			<button type="button" id="btnUpdate">更新</button>
		</p>
	</fieldset>

</html>